import React, { useEffect } from 'react';
import styles from './index.module.scss';
import Head from 'next/head';
import { Button } from '@carbon/react';
import Link from 'next/link';
import { MouseFollower } from "@/components/MouseFollower"

import {
  Rocket, 
  ChatBot, 
  Code, 
  Network,
  ArrowRight,
  MachineLearningModel 
} from '@carbon/icons-react';
import textGif from '@/images/textGif.gif'
import screenshotGif from '@/images/screenshotGif.gif'
import databaseGif from '@/images/databaseGif.gif'
import customToolsGif from '@/images/customToolsGif.gif'

const Home = (params) => {
  return (
    <>
      <Head>
        <title>Efflux - Next-Generation AI Interaction Platform</title>
        <meta name="description" content="Efflux is an open-sourced, lightweight, and highly flexible AI interactive platform." />
      </Head>
      <div className={styles.container}>
        <main className={styles.main}>
          <h1 className={styles.title}>Next-Generation AI Interaction Platform</h1>
          <p className={styles.subtitle}>
            Bridging AI Capabilities and Real-World Applications
          </p>
          
          <div className={styles.cta}>
            <Link href="https://www.efflux.ai/demo/register">
              <Button size="lg" className={styles.primaryBtn}>
                Try for free
                <ArrowRight size={24} />
              </Button>
            </Link>
          </div>

          <section className={styles.features}>
            <h2 className={styles.featuresTitle}>What is Efflux?</h2>
            <p className={styles.description}>
              Efflux is an open-sourced, lightweight, and highly flexible AI interactive platform that integrates state-of-the-art LLMs,
              front-end technologies, and Model Context Protocol (MCP).
            </p>

            <div className={styles.featureGrid}>
              <div className={styles.featureCard}>
                <div className={styles.icon}>
                  <ChatBot size={32} />
                </div>
                <h3>An LLM-Powered Chatbot</h3>
                <p>A ready-to-use AI chatbot that engages in natural conversations. Choose the LLM that works best for your business needs and run it effortlessly using Efflux.</p>
              </div>

              <div className={styles.featureCard}>
                <div className={styles.icon}>
                  <Code size={32} />
                </div>
                <h3>A Text-to-UI Tool</h3>
                <p>Convert text descriptions into fully functional UI components and interactive applications, including Screenshot-to-Code for instant UI cloning.</p>
              </div>

              <div className={styles.featureCard}>
                <div className={styles.icon}>
                  <MachineLearningModel size={32} />
                </div>
                <h3>More Unlimited Capabilities to Unlock</h3>
                <p>A centralized MCP host that enables easy and simple integrations with your databases, APIs, and endless tools in the community.</p>
              </div>
            </div>
          </section>
          <section className={styles.introduce} id="features">
            <h2 className={styles.featuresTitle}>What makes Efflux so different?</h2>
            <div className={styles.introduceCard}>
              <div  className={styles.leftTextSection}>
                <h2 className={styles.title}>Transform Text to UI and Code</h2>
                <p className={styles.description}>Describe your idea and get rendered UI with responsive code.</p>
              </div>
              <div className={styles.gifBox}>
                <img src={textGif.src} width='100%' height='auto'/>
              </div>
            </div>
            <div className={styles.introduceCard}>
              <div className={styles.leftTextSection}>
                <h2 className={styles.title}>Convert Screenshot to UI and Code</h2>
                <p className={styles.description}>
                  Upload screenshot and get a cloned UI with code.
                </p>
              </div>
              <div className={styles.gifBox}>
                <img src={screenshotGif.src} width='100%' height='auto'/>
              </div>
            </div>
            <div className={styles.introduceCard}>
              <div className={styles.leftTextSection}>
                <h2 className={styles.title}>Connect to Your Database through MCP</h2>
                <p className={styles.description}>Chat with your data sources in human language to get grounded information, <br/>even in a visualized and interactive way.</p>
              </div>
              <div className={styles.gifBox}>
                <img src={databaseGif.src} width='100%' height='auto'/>
              </div>
            </div>
            <div className={styles.introduceCard}>
              <div className={styles.leftTextSection}>
                <h2 className={styles.title}>Integrate Custom Tools through MCP</h2>
                <p className={styles.description}>
                Build secure and controlled access to unlock
                unlimited capabilities.
                </p>
              </div>
              <div className={styles.gifBox}>
                <img src={customToolsGif.src} width='100%' height='auto'/>
              </div>
            </div>
          </section>
        </main>
        <footer className={styles.footer} id='about'>
          <div className={styles.footerContent}>
            <h2 className={styles.footerTitle}>About Efflux</h2>
            <p className={styles.footerText}>Join us today to start your AI innovation journey.</p>
            <a href="mailto:contact@efflux.ai" className={styles.contactButton}>
              Contact Us
            </a>
            <div className={styles.copyright}>
              <p className={styles.copyText}>Copyright © 2025 iSoftStone</p>
              <p className={styles.copyText}>All rights reserved.</p>
            </div>
          </div>
        </footer>
      </div>
      {/* <MouseFollower /> */}
    </>
  );
};

export default Home;